<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>项目第二页</title>
    <!-- 重置样式文件 -->
    <link rel="stylesheet" href="./css/reset.css" />
    <!-- 变量文件 -->
    <link rel="stylesheet" href="./css/variable.css" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <!-- main style -->
    <link rel="stylesheet" href="./css/global.css" />
    <link rel="stylesheet" href="./css/secound.css" />
    <script src="./js/vue.global.js"></script>
  </head>
  <body>
    <div id="app-second">
      <header-com></header-com>
      <main class="main-secound">
        <!-- 热门搜索 -->
        <div class="hotSearch">
          <span>热门搜索:</span>
          <a href="javascript:void(0)" v-for="item in hotList" :key="item">
            {{item}}
          </a>
        </div>

        <!-- 封面部分 -->
        <div class="coverView">
          <div class="box">
            <a class="imgBox">
              <img :src="dataInfo.cover" class="img" />
              <span class="play"></span>
              <span class="pic-text">在线观看</span>
            </a>
          </div>
          <div class="descBox">
            <h3>{{dataInfo.title}}</h3>
            <p>
              <span class="label">标题:</span>
              <span>{{dataInfo.subTitle}}</span>
            </p>
            <p>
              <span class="label">类型:</span>
              <span>{{dataInfo.type && dataInfo.type.title}}</span>
              <!-- <span>{{dataInfo.type?.title}}</span> -->
            </p>
            <p>
              <span class="label">更新:</span>
              <span>{{dataInfo.index_show}}</span>
            </p>
            <p>
              <span class="label">剧情:</span>
              <a href="#descj" style="margin-left: 5px">详情</a>
            </p>
            <button class="btn">在线观看</button>
          </div>
        </div>

        <card-com>
          <template #left>
            <div class="viewDesc card-left">
              <card-head src="./assets/now.png">在线观看</card-head>
              <div class="seriesList">
                <a href="#" class="part">正片</a>
              </div>
              <card-head style="margin-top: 10px" src="./assets/now.png">
                剧情介绍
              </card-head>
              <div class="introduce">这里是影视的介绍 剧情发展</div>
              <card-head style="margin-top: 10px">
                {{dataInfo.type?dataInfo.type.title : '影片'}}推荐
              </card-head>
              <video-list :list="moviesData"></video-list>
            </div>
          </template>
          <template #right>
            <div class="moreList card-right">
              <card-head src="./assets/hot.png">
                最新{{dataInfo.type?dataInfo.type.title : '影片'}}
              </card-head>
              <top-list :list="hotTypeData"></top-list>
            </div>
          </template>
        </card-com>
        <!-- <div id="descj"></div> -->
      </main>
      <footer-com></footer-com>
    </div>

    <script>
      // 声明组件空间
      // 存储vue组件
      window.VueComponents = {};
      // 全局数据引用
      window.APIDATA = {};
    </script>
    <!-- 引入全局库 -->
    <script src="./js/lib.js"></script>
    <!-- 获取数据方法 -->
    <script src="./data/index.js"></script>
    <script src="./data/type.js"></script>
    <!-- 总的数据 -->
    <script src="./api/index.js"></script>
    <!-- 引入组件 -->
    <script src="./component/Header.js"></script>
    <script src="./component/Footer.js"></script>
    <script src="./component/Card.js"></script>
    <script src="./component/TopList.js"></script>
    <script src="./component/Consult.js"></script>
    <script src="./component/VideoList.js"></script>

    <script src="./js/second.js"></script>
  </body>
</html>
